﻿<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div class="order-list">
      <div
        class="order-items"
        :class="listQuery.order_status === 1 ? 'active' : ''"
        @click="stateChange(1)"
      >
        预定订单({{ count[0] }})
      </div>
      <div
        class="order-items"
        :class="listQuery.order_status === 2 ? 'active' : ''"
        @click="stateChange(2)"
      >
        现场订单({{ count[1] }})
      </div>
      <div
        class="order-items"
        :class="listQuery.order_status === '' ? 'active' : ''"
        @click="stateChange()"
      >
        全部订单({{ count[2] }})
      </div>
    </div>
    <div class="chart-content">
      <div class="filter-title">
        <el-form label-position="right">
          <el-form-item>
            <el-input
              v-model="listQuery.equipment_name"
              style="width: 160px; height:32px;"
              class="filter-item"
              :placeholder="$t('terminal.name')"
              @keyup.enter.native="handleFilter"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="listQuery.goods_name"
              style="width: 160px; height:32px;"
              class="filter-item"
              :placeholder="$t('meal.name')"
              @keyup.enter.native="handleFilter"
            ></el-input>
          </el-form-item>
          <div
            class="search-button"
            @click="handleFilter"
          >
            <img src="@/assets/images/bg_search@2x.png" />
          </div>
          <div
            class="search-button"
            @click="handleRefresh"
          >
            <img src="@/assets/images/bg_reset@2x.png" />
          </div>
          <div
            class="search-button"
            @click="searchItem"
          >
            <img
              v-show="showSearchItem === true"
              src="@/assets/images/bg_more@2x.png"
            />
            <img
              v-show="showSearchItem === false"
              src="@/assets/images/bg_sx@2x.png"
            />
          </div>
        </el-form>
      </div>
      <div
        v-show="showSearchItem"
        class="filter-container"
      >
        <el-form @submit.native.prevent>
          <el-form-item>
            <el-select
              v-model="listQuery.status"
              style="width: 160px; height:32px;"
              clearable
              :placeholder="$t('public.status')"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="listQuery.start_time"
              style="width: 160px; height:32px;"
              :picker-options="pickerOptionsB"
              type="date"
              :placeholder="$t('public.startTime')"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="listQuery.end_time"
              style="width: 160px; height:32px;"
              :picker-options="pickerOptionsE"
              type="date"
              :placeholder="$t('public.endTime')"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="chart-list">
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255,255,255,0.2)"
          border
          fit
          highlight-current-row
          style="width: 100%min-height:1000px"
        >
          <el-table-column
            fixed="left"
            align="center"
            :label="$t('table.id')"
            width="65"
          >
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('terminal.name')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.equipment_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('public.location')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('meal.name')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.goods_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('public.number')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('public.price')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.sumPrice')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.sum_price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.time')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.takeTime')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.take_time }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('public.status')"
          >
            <template slot-scope="scope">
              <span>{{
                orderType(scope.row.status, scope.row.pay_status)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.nickname')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.nickname }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('member.mobile')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.mobile }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('pay.type')"
          >
            <template slot-scope="scope">
              <span>{{ paymentMethodEs(scope.row.pay_type) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer-bar">
        <div class="pagination-container">
          <el-pagination
            background
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
        <div class="footer-count">
          共计餐品：{{ count[3] }}份，本页餐品：{{ count[4] }}份
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
import { getToken } from "@/utils/auth";
export default {
  name: "Itoc",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    return {
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      count: [],
      listLoading: true,
      orderOptions: [
        {
          value: 1,
          label: "预订"
        },
        {
          value: 2,
          label: "现场"
        }
      ],
      statusOptions: [
        {
          value: 1,
          label: "待取餐"
        },
        {
          value: 2,
          label: "待支付"
        },
        {
          value: 3,
          label: "已失效"
        },
        {
          value: 4,
          label: "已完成"
        }
      ],
      listQuery: {
        page: 1,
        limit: 20,
        equipment_name: "",
        goods_name: "",
        itoc_name: "",
        order_status: "",
        status: ""
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "添加",
        review: "审核",
        read: "查看"
      },

      circleOptions: undefined,
      circleCount: undefined,
      maintainOptions: [],
      maintainCount: undefined,
      pageSize: 20,
      optionProps: {
        value: "id",
        label: "name"
      },
      pickerOptionsB: {
        // 限制时间
        // selectableRange: ['22:00:00 - 23:59:59','00:00:00 - 02:00:00'],
        // 限制日期
        disabledDate: this.disabledDateB
      },
      pickerOptionsE: {
        disabledDate: this.disabledDateE
      }
    };
  },
  created() {
    const token = getToken();
    if (
      token &&
      !this.$store.state.socket.loginTransition &&
      !this.$store.state.socket.loginAccount
    ) {
      this.tokenLogin(token);
    }
    this.getList();
  },
  methods: {
    tokenLogin(token) {
      const path = {
        app: "wxadmin",
        api: "api_wxadmin_admin_keepLogin",
        version: "1.0",
        type: 2,
        data: {
          token: token
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        equipment_name: "",
        goods_name: "",
        itoc_name: "",
        order_status: "",
        status: ""
      };
      this.getList();
    },
    searchItem() {
      if (this.showSearchItem === true) {
        this.showSearchItem = false;
      } else {
        this.showSearchItem = true;
      }
    },
    disabledDateB(time) {
      if (this.listQuery.end_time) {
        return (
          time.getTime() >
          new Date(this.listQuery.end_time).getTime() +
          24 * 3600 * 1000 -
          8.64e7
        );
      }
    },
    disabledDateE(time) {
      if (this.listQuery.start_time) {
        return (
          time.getTime() <
          new Date(this.listQuery.start_time).getTime() - 8.64e6
        );
      }
    },
    stateChange(state = "") {
      this.listQuery.order_status = state;
      this.getList();
    },
    // 获取终端列表
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        equipment_name: this.listQuery.equipment_name
          ? this.listQuery.equipment_name
          : "",
        goods_name: this.listQuery.goods_name ? this.listQuery.goods_name : "",
        itoc_name: this.listQuery.itoc_name ? this.listQuery.itoc_name : "",
        order_status: this.listQuery.order_status
          ? this.listQuery.order_status
          : "",
        start_time: this.listQuery.start_time ? this.listQuery.start_time : ""
      };
      if (this.listQuery.end_time) {
        const date = new Date(this.listQuery.end_time);
        data["end_time"] = this.timestampToTime(
          date.getTime() + (60 * 60 * 24 * 1000 - 1)
        );
      }
      if (this.listQuery.status === 1) {
        data["status"] = 1;
        data["pay_status"] = 2;
      } else if (this.listQuery.status === 2) {
        data["status"] = 1;
        data["pay_status"] = 1;
      } else if (this.listQuery.status === 3) {
        data["pay_status"] = 3;
      } else if (this.listQuery.status === 4) {
        data["status"] = 2;
      }
      const path = {
        app: "order",
        api: "api_order_index_getList",
        version: "1.0",
        type: 2,
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            });
          } else if (resj.api === "api_order_index_getList") {
            this.count = resj.status.split(",");
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
            console.log('this.list', this.list)
          }
        }
      }
    }
  }
};
</script>
<style scoped>
.chart-content {
  border-radius: 4px 4px 0 0;
}
.footer-bar {
  display: flex;
  justify-content: space-between;
}
.footer-count {
  margin-top: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 1;
}
</style>
